<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				:model="queryData"
				size="medium"
				inline
				@submit.native.prevent
			>
				<el-form-item
					:label="$t('game.venue_name') + ':'"
					prop="venueName"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.venueName"
						clearable
						size="medium"
						:maxlength="12"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('game.show_status') + ':'"
					prop="status"
				>
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="$t('common.all')"
						style="width:200px"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in statusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('common.last_updateBy') + ':'"
					prop="updatedBy"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.updatedBy"
						clearable
						size="medium"
						:maxlength="12"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="venueName"
					align="center"
					:label="$t('game.venue_name')"
				>
					<template slot-scope="scope">
						{{ scope.row[getKey('venueName')] }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('game.venue_manage.wallet_name')"
				>
					<template slot-scope="scope">
						<p v-if="$i18n.locale === 'zh_CN'">
							{{ scope.row.walletNamesJson.zhName }}
						</p>
						<p v-if="$i18n.locale === 'vi_VN'">
							{{ scope.row.walletNamesJson.vnName }}
						</p>
						<p v-if="$i18n.locale === 'th_TH'">
							{{ scope.row.walletNamesJson.thName }}
						</p>
						<p v-if="$i18n.locale === 'en_US'">
							{{ scope.row.walletNamesJson.enName }}
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:width="getWidth(90)"
					:label="$t('game.show_status')"
				>
					<template slot-scope="scope">
						<el-tag v-show="scope.row.status === 1" type="success">
							{{ $t('common.status_turn_on') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 2" type="warning">
							{{ $t('common.status_maintain') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 0" type="danger">
							{{ $t('common.status_disabled') }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="modeSwitch"
					align="center"
					:label="$t('game.mode_switch')"
					width="140px"
				>
					<template slot-scope="scope">
						<el-switch
							:value="scope.row.sourceType"
							:disabled="
								!hasPermission('90750058') ||
									scope.row.status !== 1
							"
							active-text="H5"
							inactive-text="原生"
							active-color="#ff4949"
							:active-value="1"
							:inactive-value="0"
							@change="
								updatedModeSwitch($event, scope.row.venueId)
							"
						/>
					</template>
				</el-table-column>
				<!-- 场馆图标 -->
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('game.venue_manage.venue_icon')"
				>
					<template slot-scope="scope">
						<el-link
							v-if="
								scope.row.venueIconUrlPc ||
									scope.row.venueIconUrlApp
							"
							type="primary"
							@click="
								venueIconUrlPc = scope.row.venueIconUrlPc
								venueIconUrlApp = scope.row.venueIconUrlApp
								venueIconVisible = true
								isTransferIcon = 1
							"
						>
							{{ $t('common.click_show') }}
						</el-link>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<!-- 场馆切换图标 -->
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('game.venue_manage.venue_switch_icon')"
				>
					<template slot-scope="scope">
						<el-link
							v-if="
								scope.row.venueTransferIconUrlPc ||
									scope.row.venueTransferIconUrlApp
							"
							type="primary"
							@click="
								venueTransferIconUrlPc =
									scope.row.venueTransferIconUrlPc
								venueTransferIconUrlApp =
									scope.row.venueTransferIconUrlApp
								venueIconVisible = true
								isTransferIcon = 2
							"
						>
							{{ $t('common.click_show') }}
						</el-link>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<!-- 场馆钱包图标 -->
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('game.venue_manage.venue_wallet_icon')"
				>
					<template slot-scope="scope">
						<el-link
							v-if="scope.row.venueWalletIconUrl"
							type="primary"
							@click="
								venueWalletIconUrl =
									scope.row.venueWalletIconUrl
								venueIconVisible = true
								isTransferIcon = 3
							"
						>
							{{ $t('common.click_show') }}
						</el-link>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="gameAmountTotal"
					align="center"
					:label="
						$t('game.venue_manage.include_game') +
							`(${$t('game.venue_manage.all')})`
					"
					width="120px"
				></el-table-column>
				<!-- <el-table-column
					prop="gameAmountEnabled"
					align="center"
					:label="
						`${$t('game.venue_manage.include_game')}(${$t(
							'common.status_turn_on'
						)})`
					"
				></el-table-column> -->
				<!-- <el-table-column
					prop="gameAmountInMaintenance"
					align="center"
					:label="
						`${$t('game.venue_manage.include_game')}(${$t(
							'common.status_maintain'
						)})`
					"
				></el-table-column> -->
				<!-- <el-table-column
					prop="gameAmountDisabled"
					align="center"
					:label="
						`${$t('game.venue_manage.include_game')}(${$t(
							'common.status_disabled'
						)})`
					"
				></el-table-column> -->
				<el-table-column
					prop="statusUpdatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
				>
					<template slot-scope="scope">
						{{ scope.row.statusUpdatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="statusUpdatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
				>
					<template slot-scope="scope">
						{{ scope.row.statusUpdatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="changeStatusRemark"
					align="center"
					:label="$t('common.remark')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.changeStatusRemark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('common.actions')"
					width="240px"
				>
					<template slot-scope="scope">
						<span>
							<el-button
								v-if="
									hasPermission('301011') && scope.row.status
								"
								type="danger"
								@click="updateStatus(scope.row.venueId, 0)"
							>
								{{ $t('common.disabled') }}
							</el-button>
							<el-button
								v-if="
									hasPermission('301011') && !scope.row.status
								"
								type="success"
								@click="updateStatus(scope.row.venueId, 1)"
							>
								{{ $t('common.turn_on') }}
							</el-button>
						</span>
						<span>
							<el-button
								v-if="
									hasPermission('301012') &&
										scope.row.status !== 2
								"
								type="warning"
								@click="
									rowData = scope.row
									submitStatus = 2
									remarksVisible = true
								"
							>
								{{ $t('common.maintain') }}
							</el-button>
							<template v-else>
								<el-button
									v-if="hasPermission('301012')"
									type="success"
									@click="updateStatus(scope.row.venueId, 1)"
								>
									{{ $t('common.turn_on') }}
								</el-button>
							</template>
						</span>

						<el-button
							v-if="hasPermission('301013')"
							:disabled="scope.row.status === 1"
							type="primary"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			v-if="addVisible"
			:title="$t('common.edit')"
			:visible.sync="addVisible"
			width="1100px"
		>
			<el-form
				ref="addForm"
				:model="addFormData"
				:label-position="'right'"
				label-width="auto"
				destroy-on-close
				@submit.native.prevent
			>
				<el-form-item :label="$t('game.game_venue') + ':'">
					{{ rowData[[getKey('venueName')]] }}
				</el-form-item>
				<el-form-item
					:label="
						$t('game.venue_manage.wallet_name') +
							$t('game.venue_manage.wallet_zh') +
							':'
					"
					prop="zhName"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_enter') +
								$t('game.venue_manage.wallet_name'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="addFormData.zhName"
						clearable
						disabled
						size="medium"
						style="width: 400px"
						:placeholder="
							$t('common.please_enter') +
								$t('game.venue_manage.wallet_name')
						"
						maxlength="30"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					:label="
						$t('game.venue_manage.wallet_name') +
							$t('game.venue_manage.wallet_en') +
							':'
					"
					prop="enName"
				>
					<el-input
						v-model="addFormData.enName"
						clearable
						size="medium"
						style="width: 400px"
						:placeholder="
							$t('common.please_enter') +
								$t('game.venue_manage.wallet_name')
						"
						maxlength="30"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						$t('game.venue_manage.wallet_name') +
							$t('game.venue_manage.wallet_vn') +
							':'
					"
					prop="thName"
				>
					<el-input
						v-model="addFormData.thName"
						clearable
						size="medium"
						style="width: 400px"
						:placeholder="
							$t('common.please_enter') +
								$t('game.venue_manage.wallet_name')
						"
						:disabled="loading"
						maxlength="30"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						$t('game.venue_manage.wallet_name') +
							$t('game.venue_manage.wallet_th') +
							':'
					"
					prop="vnName"
				>
					<el-input
						v-model="addFormData.vnName"
						clearable
						size="medium"
						maxlength="30"
						style="width: 400px"
						:placeholder="
							$t('common.please_enter') +
								$t('game.venue_manage.wallet_name')
						"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>-->
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="
								$t('game.venue_manage.venue_icon') + '-APP/H5：'
							"
							prop="venueIconUrlApp"
							:rules="[
								{
									required: false,
									message: $t('game.please_upload_icon'),
									trigger: 'blur'
								}
							]"
						>
							<UploadItem
								:disabled="true"
								ref="venueIconUrlApp"
								:uploadAPI="uploadAPI"
								:imgUrl="addFormData.venueIconUrlApp"
								:upload-file-type="'image'"
								:platform="'PC'"
								:bounds="{
									width: 216,
									height: 216
								}"
								:fileSize="fileSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(
											file,
											'venueIconUrlApp'
										)
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									(e) => handleDeleteUpload('venueIconUrlApp')
								"
								@upoladItemDefeat="
									(e) => handleUploadDefeat('venueIconUrlApp')
								"
							></UploadItem>
							<p style="color:red" class="tip">
								{{ $t('game.venue_manage.img_type') }}216*216{{
									$t('game.venue_manage.img_size')
								}}5M
							</p>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="
								$t('game.venue_manage.venue_icon') + '-PC：'
							"
							prop="venueIconUrlPc"
							:rules="[
								{
									required: false,
									message: $t('game.please_upload_icon'),
									trigger: 'blur'
								}
							]"
						>
							<UploadItem
								:disabled="true"
								ref="venueIconUrlPc"
								:uploadAPI="uploadAPI"
								:imgUrl="addFormData.venueIconUrlPc"
								:upload-file-type="'image'"
								:platform="'PC'"
								:bounds="{
									width: 506,
									height: 438
								}"
								:fileSize="fileSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(
											file,
											'venueIconUrlPc'
										)
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									(e) => handleDeleteUpload('venueIconUrlPc')
								"
								@upoladItemDefeat="
									(e) => handleUploadDefeat('venueIconUrlPc')
								"
							></UploadItem>
							<p style="color:red" class="tip">
								{{ $t('game.venue_manage.img_type') }}506*438{{
									$t('game.venue_manage.img_size')
								}}5M
							</p>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="
								$t('game.venue_manage.venue_switch_icon') +
									'-APP/H5：'
							"
							prop="venueTransferIconUrlApp"
							:rules="[
								{
									required: false,
									message: $t('game.please_upload_icon'),
									trigger: 'blur'
								}
							]"
						>
							<UploadItem
								:disabled="true"
								ref="venueTransferIconUrlApp"
								:uploadAPI="uploadAPI"
								:upload-file-type="'image'"
								:imgUrl="addFormData.venueTransferIconUrlApp"
								:platform="'PC'"
								:bounds="{
									width: 312,
									height: 270
								}"
								:fileSize="fileSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(
											file,
											'venueTransferIconUrlApp'
										)
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									(e) =>
										handleDeleteUpload(
											'venueTransferIconUrlApp'
										)
								"
								@upoladItemDefeat="
									(e) =>
										handleUploadDefeat(
											'venueTransferIconUrlApp'
										)
								"
							></UploadItem>
							<p style="color:red" class="tip">
								{{ $t('game.venue_manage.img_type') }}312*270{{
									$t('game.venue_manage.img_size')
								}}5M
							</p>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="
								$t('game.venue_manage.venue_switch_icon') +
									'-PC：'
							"
							prop="venueTransferIconUrlPc"
							:rules="[
								{
									required: false,
									message: $t('game.please_upload_icon'),
									trigger: 'blur'
								}
							]"
						>
							<UploadItem
								:disabled="true"
								ref="venueTransferIconUrlPc"
								:uploadAPI="uploadAPI"
								:upload-file-type="'image'"
								:imgUrl="addFormData.venueTransferIconUrlPc"
								:platform="'PC'"
								:bounds="{
									width: 360,
									height: 378
								}"
								:fileSize="fileSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(
											file,
											'venueTransferIconUrlPc'
										)
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									(e) =>
										handleDeleteUpload(
											'venueTransferIconUrlPc'
										)
								"
								@upoladItemDefeat="
									(e) =>
										handleUploadDefeat(
											'venueTransferIconUrlPc'
										)
								"
							></UploadItem>
							<p style="color:red" class="tip">
								{{ $t('game.venue_manage.img_type') }}360*378{{
									$t('game.venue_manage.img_size')
								}}5M
							</p>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item
					:label="$t('game.venue_manage.venue_wallet_icon') + ':'"
					prop="venueWalletIconUrl"
					:rules="[
						{
							required: false,
							message: $t('game.please_upload_icon'),
							trigger: 'blur'
						}
					]"
				>
					<UploadItem
						ref="venueWalletIconUrl"
						:disabled="true"
						:uploadAPI="uploadAPI"
						:upload-file-type="'image'"
						:imgUrl="addFormData.venueWalletIconUrl"
						:platform="'PC'"
						:bounds="{
							width: 90,
							height: 90
						}"
						:fileSize="fileSize"
						@upoladItemSucess="
							(file) =>
								handleUploadSucess(file, 'venueWalletIconUrl')
						"
						@startUpoladItem="handleStartUpload"
						@deleteUpoladItem="
							(e) => handleDeleteUpload('venueWalletIconUrl')
						"
						@upoladItemDefeat="
							(e) => handleUploadDefeat('venueWalletIconUrl')
						"
					></UploadItem>
					<p style="color:red" class="tip">
						{{ $t('game.venue_manage.img_type') }}90*90{{
							$t('game.venue_manage.img_size')
						}}5M
					</p>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submit">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<el-dialog
			:visible.sync="remarksVisible"
			:before-close="
				() => {
					$refs.remarkForm.clearValidate()
					remarkForm.changeStatusRemark = ''
					remarksVisible = false
				}
			"
			width="600px"
			:title="$t('common.maintain')"
		>
			<el-form
				ref="remarkForm"
				:model="remarkForm"
				:label-position="'right'"
				destroy-on-close
			>
				<el-form-item
					:label="$t('common.remark')"
					prop="changeStatusRemark"
					:rules="[
						{
							required: true,
							message: $t('game.venue_manage.input')
						}
					]"
				>
					<el-input
						v-model="remarkForm.changeStatusRemark"
						:placeholder="$t('game.venue_manage.input')"
						type="textarea"
						:maxlength="500"
						show-word-limit
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					@click="
						$refs.remarkForm.clearValidate()
						remarkForm.changeStatusRemark = ''
						remarksVisible = false
					"
				>
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="updateStatusRemarks">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:visible.sync="venueIconVisible"
			:width="isTransferIcon === 3 ? '330px' : '650px'"
		>
			<ul v-if="isTransferIcon === 1" class="imgView">
				<li>
					<span>APP/H5{{ $t('game.venue_manage.venue_icon') }}</span>
					<img :src="venueIconUrlApp" alt="" />
				</li>
				<li>
					<span>PC{{ $t('game.venue_manage.venue_icon') }}</span>
					<img :src="venueIconUrlPc" alt="" />
				</li>
			</ul>
			<ul v-if="isTransferIcon === 2" class="imgView">
				<li>
					<span>
						APP/H5{{ $t('game.venue_manage.venue_switch_icon') }}
					</span>
					<img :src="venueTransferIconUrlApp" alt="" />
				</li>
				<li>
					<span>
						PC{{ $t('game.venue_manage.venue_switch_icon') }}
					</span>
					<img :src="venueTransferIconUrlPc" alt="" />
				</li>
			</ul>
			<ul v-if="isTransferIcon === 3" class="imgView">
				<li>
					<span>
						{{ $t('game.venue_manage.venue_wallet_icon') }}
					</span>
					<img :src="venueWalletIconUrl" alt="" />
				</li>
			</ul>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'

import UploadItem from '@/components/UploadItem'
import { editVenue, getVenueList, setVenueStatus } from '@/api/game'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.venueManage,
	components: {
		UploadItem,
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				venueName: '',
				updatedBy: '',
				status: undefined
			},
			isTransferIcon: false,
			rowData: {},
			tableData: [],
			addVisible: false,
			addFormData: {
				zhName: '',
				// thName: '',
				// vnName: '',
				// enName: '',
				venueIconUrlApp: '',
				venueIconUrlPc: '',
				venueTransferIconUrlApp: '',
				venueTransferIconUrlPc: '',
				venueWalletIconUrl: ''
			},
			remarkForm: {
				changeStatusRemark: ''
			},
			loading: false,
			pageNum: 1,
			pageSize: 100,
			total: 0,
			venueIconVisible: false,
			venueIconUrlPc: '',
			venueIconUrlApp: '',
			venueTransferIconUrlPc: '',
			venueTransferIconUrlApp: '',
			venueWalletIconUrl: '',
			remarksVisible: false,
			changeStatusRemark: '',
			submitStatus: null
		}
	},
	computed: {
		accountType() {
			return this.globalDics.accountType || []
		},
		// 显示状态
		statusList() {
			return [
				{
					code: '0',
					description: this.$t('common.status_disabled')
				},
				{
					code: '1',
					description: this.$t('common.status_turn_on')
				},
				{
					code: '2',
					description: this.$t('common.status_maintain')
				}
			]
		},

		// 图片上传接口
		uploadAPI() {
			return this.$api.imageUpload
		},
		fileSize() {
			return 5 * 1024 * 1024
		}
	},
	created() {
		this.loadData()
	},
	methods: {
		updatedModeSwitch(val, venueId) {
			this.$confirm(
				`<strong>${this.$t('game.venue_manage.is')}${this.$t(
					'game.mode_switch'
				)}${this.$t('common.actions')}
				</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>
					${this.$t('operation.switch_status_tips2')}
				</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					const params = { venueId: venueId, sourceType: val }
					this.$api
						.setVenueModeSwitch(params)
						.then((res) => {
							if (res.code === 200) {
								this.loadData()
							}
						})
						.catch(() => {})
				})
				.catch(() => {})
		},
		reset() {
			this.$refs.searchForm.resetFields()
			this.pageNum = 1
			this.loadData()
		},
		// 列表数据获取
		loadData() {
			this.loading = true
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.queryData
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			getVenueList(params).then((res) => {
				this.loading = false
				this.tableData = res.data.record
				this.total = res.data.totalRecord
			})
		},
		// 修改状态 启用/禁用
		updateStatus(venueId, status) {
			const text =
				status === 0
					? this.$t('common.disabled')
					: status === 1
					? this.$t('common.turn_on')
					: this.$t('common.maintain')
			this.$confirm(
				`<strong>${this.$t('game.venue_manage.is')}${text}${this.$t(
					'common.actions'
				)}</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.switch_status_tips2'
					)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					setVenueStatus({ venueId, status }).then((res) => {
						if (res?.code === 200) {
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},
		// 修改状态 维护/启用/禁用
		updateStatusRemarks() {
			this.$refs.remarkForm.validate((valid) => {
				if (valid) {
					setVenueStatus({
						venueId: this.rowData.venueId,
						status: this.submitStatus,
						changeStatusRemark: this.remarkForm.changeStatusRemark
					}).then((res) => {
						if (res?.code === 200) {
							this.remarksVisible = false
							this.remarkForm.changeStatusRemark = ''
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				}
			})
		},
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					const params = { ...this.addFormData }
					for (const k in params) {
						if (
							params[k] === '' ||
							params[k] === undefined ||
							(Object.prototype.toString.call(params[k]) ===
								'[object Array]' &&
								!params[k].length)
						) {
							delete params[k]
						}
					}
					editVenue({
						...params,
						venueId: this.rowData.venueId
					}).then((res) => {
						if (res.code !== 200) {
							return this.$message.error(res.msg)
						}
						this.loadData()
						this.$message.success(this.$t('common.action_success'))
						this.addVisible = false
					})
				}
			})
		},
		// 编辑
		edit(row) {
			this.addVisible = true
			this.rowData = row
			for (const k in this.addFormData) {
				this.addFormData[k] = row[k]
			}
			this.addFormData.thName = row.walletNamesJson.thName || ''
			this.addFormData.zhName = row.walletNamesJson.zhName || ''
			this.addFormData.vnName = row.walletNamesJson.vnName || ''
			this.addFormData.enName = row.walletNamesJson.enName || ''
			this.$nextTick(() => {
				this.$refs.venueIconUrlApp.fileUrl = row.venueIconUrlApp || ''
				this.$refs.venueIconUrlPc.fileUrl = row.venueIconUrlPc || ''
				this.$refs.venueTransferIconUrlApp.fileUrl =
					row.venueTransferIconUrlApp || ''
				this.$refs.venueTransferIconUrlPc.fileUrl =
					row.venueTransferIconUrlPc || ''
				this.$refs.venueWalletIconUrl.fileUrl =
					row.venueWalletIconUrl || ''
			})
		},
		// 分页
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		// 分页
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		handleClose() {},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }, key) {
			this.addFormData[key] = file.imgUrl
		},
		handleUploadDefeat(key) {
			this.addFormData[key] = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload(key) {
			this.addFormData[key] = ''
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
.imgView {
	display: flex;
	justify-content: space-between;
	margin: 0 15px;
	li {
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
		span {
			width: 200px;
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
		}
		img {
			display: block;
			width: 200px;
		}
	}
}

.vi_VN,
.en_US,
.th_TH {
	.imgView {
		white-space: nowrap;
		li {
			span {
				width: 350px;
			}
		}
	}
	.tip {
		width: 105%;
	}
}
</style>
